<template>

    <div class="goods-list">
         <!--在网页中有两种跳转方式：-->
         <!--方式1：使用a标签的形式 叫做 标签跳转 -->
         <!--方式2：使用window.location.href的形式，叫做 编程式导航-->
         <div class="goods-item" v-for="(item,index) in  goodsList"
              :key="index" @click="goDetail(item.id)">
             <div class="goods-img"><img :src="item.url" alt=""></div>
             <h3 class="title">{{item.title}}</h3>
             <div class="info">
                 <p class="price">
                     <span class="now">￥{{item.now_price}}</span>
                     <span class="old">￥{{item.old_price}}</span>
                 </p>
                 <p class="sell">
                     <span>热卖中</span>
                     <span>剩60件</span>
                 </p>
             </div>
         </div>
         <mt-button type="danger" size="large" plain @click="getMore">{{this.moreText}}</mt-button>
    </div>

</template>
<script>
    import {Toast} from 'mint-ui';
    export default{
        data(){
            return {
                sliceNum:4,
                goodsList:[],
                moreText:'加载更多',
            }
        },
        created(){
            this.getGoodsList();
        },
        methods: {
            getGoodsList(){
                this.$http.get("src/mock/goodsList.json").then(result=>{
                    if (result.status === 200){
                        this.goodsList = result.body.reverse().slice(0,4);
                    }else {
                        Toast("获取商品列表失败！")
                    }
                })
            },
            //获取更多商品
            getMore(){
                this.$http.get("src/mock/goodsList.json").then(result=>{
                    if (result.status === 200){
                        this.goodsList = this.goodsList.concat(result.body.reverse().slice(this.sliceNum,this.sliceNum+4));
                        this.sliceNum+=4;
                        if (this.goodsList.length == result.body.length){
                            this.moreText = '没有更多商品了！';
                            this.sliceNum = result.body.length;
                        }

                    }else {
                        Toast("获取商品列表失败！")
                    }
                })
            },
            goDetail(id){
//                使用js的形式进行 路由导航
                //1.简单
//                this.$router.push('/home/GoodsInfo/' + id);
                //传递对象
//                this.$router.push({path:'/home/GoodsInfo/' + id});
                //传递命名（name）的路由
                this.$router.push({name:'goodsInfo',params:{id}});
            }
        },
        computed: {},
        components: {}
    }
</script>
<style scoped lang="scss">
    .goods-list{
            display: flex;
            flex-wrap: wrap;
            padding: 8px;
            justify-content: space-between;
            .goods-item{
                width: 49%;
                border: 1px solid #CCCCCC;
                box-shadow: 0 0 8px #CCCCCC;
                margin: 3px 0;
                padding: 5px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 260px;
                .goods-img{
                    width: 111px;
                    height: 150px;
                    margin: 0 auto;
                    img{
                        width: 100%;
                    }
                }
                .title{
                    font-size: 14px;
                }
                .info{
                    background: #EEEEEE;
                    p{
                        margin: 0;
                        padding: 5px;
                    }
                    .price{
                        .now{
                            color: red;
                            font-weight: bold;
                            font-size: 16px;
                        }
                        .old{
                            text-decoration: line-through;
                            font-size: 12px;
                            margin-left: 10px;
                        }
                    }
                    .sell{
                        display: flex;
                        justify-content: space-between;
                    }

                }

            }

        .mint-button--danger.is-plain {
            border: 1px solid #ef4f4f;
            background-color: #ef4f4f;
            color: #ffffff;
            margin-top: 15px;
        }
    }
</style>